<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!--样式类名操作：针对css3、添加、移除、切换的元素类名操作
		addClass()   有参 1个参和多个参
		  			        语法：addClass("类名")  
		  					<p class="类名">
		  					语法：addClass("类名1  类名2");
		  					<p class="类名1 类名2" >
		  					功能：匹配元素集合中所有元素
		  					添加一个或多个类名操作
		  					理解：元素添加存在的样式
		removeClass() 功能：匹配元素集合中所有元素
		  				    移除一个或多个类名操作
		toggleClass()  功能：如果元素有类名移除，没有则添加
		hasClass()     功能：检查匹配元素集合中是否包含指定类名
		                 返回值bool
		  -->
		  <!-- 要求：1.jq引入
					2.html：   div    id="targetElement"
					          4个按钮      id="addClassBtn"
										   id="removeClassBtn"
										   id="toggleClassBtn"
										   id="hasClassBtn"
							   div    id="resultArea"
					3.css：  .bgColor{  300*300  背景颜色随意}
							 .broders{ 10个像素实线红色边框 倒角画圆}
					-->
					<script src="../js/jquery-1.11.1.js"></script>
							 <style>
							 	.bgColor{
									width: 300px;
									height: 300px;
									background: #ffaaff;
								}
								.broders{
									border: 10px solid #55ffff;
									border-radius: 50%;
								}
							 </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击 添加类名 按钮 添加效果【样式】  300*300 背景色红色
			$("#addClassBtn").click(function(){
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
			});
			//2.点击 添加类名 按钮 添加效果【样式】  
			//300*300 背景色红色   圆 外层 10px黄色的框
			//3.点击 添加类名 按钮 添加效果【样式】  300*300 背景色红色
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("broders");
				$("#resultArea").html("<h4>移除样式类名：bgColor</h4>")
			});
			//4.点击 切换类名 按钮 添加效果【样式】  
			//300*300 背景色红色 圆 外层 10px黄色的框
			$("#toggleClassBtn").click(function(){
				//div添加样式 --存在样式：类名
				$("#targetElement").toggleClass("broders");
				$("#resultArea").html("<h4>移除样式类名：bgColor</h4>")
			});
			//5.点击 切换类名 按钮 添加效果【样式】
			//300*300 背景色红色 
			$("#toggleClassBtn").click(function(){
				//div添加样式 --存在样式：类名
				$("#targetElement").toggleClass("bgColor");
				$("#resultArea").html("<h4>移除样式类名：bgColor</h4>")
			});
			//6.点击 检查类名是否存在：存在 true存在    false不存在
			$("#hasClassBtn").click(function(){
				//div添加样式 --存在样式：类名
				var hc=$("#targetElement").hasClass("broders");
				$("#resultArea").text("检查当前样式是否存在："+hc)
			});
		</script>
	</body>
</html>